<script setup lang="ts">
import { reactive, ref, onMounted } from "vue"
import { CompanyBillListApi, knotBatchApi, knotApi } from "@/api/bill"
import billNew from "./billNew.vue"
// import { companyListApi } from "@/api/conventional"
import { type FormInstance, ElMessage } from "element-plus"
import { RefreshRight } from "@element-plus/icons-vue"
import companyTransfer from "./company_transfer.vue"

const companyTransferRef = ref<any>(undefined)
const billNewRef = ref<any>(undefined)
const loading = ref<boolean>(false)
const listBool = ref<boolean>(false)
const tableData = ref<any[]>([])
// const state1 = ref<string>("")

onMounted(() => {
  getCompanyTime()
})

const getCompanyTime = () => {
  loading.value = true
  tableData.value = []
  console.log(formInline)
  CompanyBillListApi(formInline)
    .then((res: any) => {
      if (res.data.length > 0) {
        tableData.value = res.data
        listBool.value = true
      }
    })
    .catch(() => {})
    .finally(() => {
      loading.value = false
    })
  // getCompanyTimeNewApi(formInline)
  //   .then((res: any) => {
  //     if (res.data.length > 0) {
  //       tableData.value = res.data
  //       listBool.value = true
  //     }
  //   })
  //   .catch(() => {})
  //   .finally(() => {
  //     loading.value = false
  //   })
}
const RefreshRights = () => {
  getCompanyTime()
}
const handleCompany = (el: any) => {
  if (billNewRef.value) {
    billNewRef.value.showClick(el)
  }
}
const formInline = reactive({
  // date: currentDate.format("YYYY-MM-DD"),
  company_id: undefined,
  company_name: "",
  create_time_start: undefined,
  create_time_end: undefined,
  is_finish: 2,
  type: "history"
})
// const formInline = reactive({
//   date: currentDate.format("YYYY-MM-DD"),
//   company_name: ""
// })

const onSubmit = () => {
  getCompanyTime()
}

const handleBatch = () => {
  if (companyTransferRef.value) {
    companyTransferRef.value.showClick(tableData.value)
  }
}
const closeBatch = () => {
  getCompanyTime()
}
// const handleSelect = (item: any) => {
//   formInline.company_id = item.id
// }
// const handleChange = (value: string) => {
//   console.log(value)
//   if (value.length === 0) {
//     formInline.company_id = undefined
//   }
// }
const customDateTimeFormat = ref<string>("YYYY-MM-DD")
// const querySearch = (queryString: string, cb: any) => {
//   state1.value = queryString
//   companyListApi({
//     company_name: state1.value
//   }).then((res) => {
//     const lists = res.data
//     if (lists.length == 0) {
//       ElMessage.error("请先添加企业信息")
//       cb([])
//     } else {
//       cb(lists)
//     }
//   })
// }

const selectedIds = ref<any[]>([])
const handleInputChange = (el: number) => {
  // 判断是否已经存在于 selectedIds 中
  const index = selectedIds.value.indexOf(el)
  if (index > -1) {
    // 如果存在，则移除
    selectedIds.value.splice(index, 1)
  } else {
    // 如果不存在，则添加
    selectedIds.value.push(el)
  }
  console.log(selectedIds.value)
}

const knotBatchs = () => {
  if (selectedIds.value.length > 0) {
    knotBatchApi({
      ids: selectedIds.value.join()
    })
      .then(() => {
        ElMessage.success("操作成功")
        resetSearch()
        getCompanyTime()
      })
      .catch(() => {})
      .finally(() => {
        loading.value = false
      })
  }
}
const searchFormRef = ref<FormInstance | null>(null)
const resetSearch = () => {
  selectedIds.value = []
  searchFormRef.value?.resetFields()
}

const handlePlease = (el: any) => {
  knot(el.company_id, el.id)
}
const knot = (company_id: number, ids: number) => {
  knotApi({
    company_id: company_id,
    ids: ids
  }).then(() => {
    ElMessage.success("操作成功")
    resetSearch()
    getCompanyTime()
  })
}
</script>
<template>
  <div>
    <el-card class="box-card" v-loading="loading">
      <template #header>
        <div class="card-header">
          <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="searchFormRef">
            <el-form-item label="公司名称">
              <el-input v-model="formInline.company_name" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item label="结账日期">
              <el-date-picker
                v-model="formInline.create_time_start"
                :format="customDateTimeFormat"
                :value-format="customDateTimeFormat"
                type="date"
                placeholder="请选择"
              />
              <span>&nbsp;&nbsp; 至 &nbsp;&nbsp;</span>
              <el-date-picker
                v-model="formInline.create_time_end"
                :format="customDateTimeFormat"
                :value-format="customDateTimeFormat"
                type="date"
                placeholder="请选择"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit"> 确 认 </el-button>
            </el-form-item>
          </el-form>

          <div class="head-right">
            <div style="margin: 0 10px"><el-button @click="knotBatchs" type="primary" plain>批量结账</el-button></div>
            <div style="margin: 0 10px">
              <el-button @click="handleBatch" type="primary" plain>批量结账弹框</el-button>
            </div>
            <div>
              <el-tooltip content="刷新当前页">
                <el-button type="primary" :icon="RefreshRight" circle @click="RefreshRights" />
              </el-tooltip>
            </div>
          </div>
        </div>
      </template>
      <el-scrollbar max-height="400px">
        <div v-if="listBool" class="sourceList">
          <div v-for="(item, index) in tableData" :key="index" class="template">
            <div class="sourceTitle">
              <!-- 复选框 -->
              <div class="sourceTitleBox" style="border: none">
                <el-checkbox @change="handleInputChange(item.id)" />
              </div>
              <!-- 日期 -->
              <div class="sourceTitleBox" style="width: 100px; border: none">{{ item.date }}</div>
              <!-- 公司名称 -->
              <div class="sourceTitleBox company_names" @click="handleCompany(item)">
                {{ item.company_name }}
              </div>
              <!-- 业务员名称 -->
              <div class="sourceTitleBox" style="width: 10%">
                {{ item.nickname }}
              </div>
              <!-- 贴现 -->
              <div class="sourceTitleBox company_number" :class="{ discounts: item.enter_company_count > 0 }">
                <div v-if="item.enter_company_count > 0" class="">贴现：{{ item.enter_company_count }}</div>
              </div>
              <!-- 买票 -->
              <div class="sourceTitleBox company_number" :class="{ buys: item.out_company_count > 0 }">
                <div v-if="item.out_company_count > 0" class="">买票：{{ item.out_company_count }}</div>
              </div>
              <!-- 操作按钮 -->
              <div class="sourceTitleBox" style="border: none">
                <el-button type="primary" size="small" @click="handlePlease(item)">结账</el-button>
              </div>
            </div>
          </div>
        </div>
        <el-empty v-else description="暂无数据" />
      </el-scrollbar>
    </el-card>

    <billNew ref="billNewRef" @dialog-close="getCompanyTime" />
    <companyTransfer ref="companyTransferRef" @dialog-close="closeBatch" />
  </div>
</template>
<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search-wrapper {
  margin-bottom: 20px;
  :deep(.el-card__body) {
    padding-bottom: 20px;
  }
}

.sourceList {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.template {
  width: 50%;
  display: flex;
  justify-content: center;
}
.template:nth-child(2n + 1) {
  height: 50%;
  border-right: 1px solid #b3b3b3; /* 竖线样式，可以根据需要调整 */
}
.sourceTitle {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}
.sourceTitleBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ccc;
  padding: 5px 10px;
  border-radius: 5px;
  margin-right: 6px;
  margin-bottom: 10px;
  cursor: pointer;
  &:hover {
    background-color: #409eff;
    color: #fff;
  }
  &.active {
    background-color: #409eff;
    color: #fff;
  }
}
.company_names {
  width: 40%;
}
.company_number {
  width: 100px;
  border: none;
}
.discounts {
  background-color: #409eff;
  color: white;
}
.buys {
  background-color: #e6a23c;
  color: white;
}
.head-right {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
